<template>
    <el-dialog title="提示" :visible.sync="showModify" width="30%" center >
      <el-form ref="form" :model="formData" label-width="80px" :rules="validateRules" size="mini">
        <el-form-item label="登录名称" prop="loginName">
          <el-input v-model="formData.loginName" placeholder="请输入登录名称" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="loginPassword">
          <el-input placeholder="请输入密码" v-model="formData.loginPassword" show-password></el-input>
        </el-form-item>
        <el-form-item label="重复密码" prop="loginPassword2">
          <el-input placeholder="请输入密码" v-model="formData.loginPassword2" show-password></el-input>
        </el-form-item>
        <el-form-item label="用户姓名" prop="userName">
          <el-input v-model="formData.userName" placeholder="请输入用户姓名" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="userTel">
          <el-input v-model="formData.userTel" placeholder="请输入联系方式" maxlength="50" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="ruleId">
          <el-select v-model="formData.ruleId" placeholder="请选择角色">
            <el-option v-for="item in ruleData" :key="item.id" :label="item.ruleName" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onModify">确定</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

</template>
<script>
import {mapActions} from "vuex"
export default {
    
    mounted(){
      this.getRuleList().then(res=>{
        
        this.ruleData=res
      })
    },
    data() {
      var validatePass = (rule, value, callback) => {
        if (value == this.formData.loginPassword) {
          callback()
        } else {
          //两次输入的密码不一致
          callback(new Error('两次输入的密码不一致'))
        }
      };
      
      return {
        formData: {},
        showModify: false,
        ruleData: [
        
        ],
        validateRules: {
          loginName: [
            { required: true, message: "请输入登陆用户名称", trigger: "blur" }
          ],
          loginPassword: [
            { required: true, message: "请输入密码", trigger: "blur" }
          ],
          loginPassword2: [
            { required: true, message: "请输入确认密码", trigger: "blur" },
            { validator: validatePass, trigger: 'blur' }
          ],
          userName: [
            { required: true, message: "请输入用户角色名称", trigger: "blur" }
          ],
          userTel: [
            { required: true, message: "请输入用户电话名称", trigger: "blur" }
          ],
          ruleId: [
            { required: true, message: "请输入角色名称", trigger: "blur" }
          ]
        }
      }
    },
  methods: {
    ...mapActions('pms/sys.user',['userAdd','userUpdate']),
    ...mapActions('pms/sys.rule',['getRuleList']),
    showDialog(data={}) {
      this.formData = data
      //将菜单Dialog显示出来
      this.showModify = true
    },
    onModify() {
      //在用户修改了菜单之后执行
      this.showModify = false,
       this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.formData.id) {
             this.userUpdate(this.formData).then(()=>{
              
                this.$message.success("修改成功")
                
            })
          } else {
            this.userAdd(this.formData).then(()=>{
              console.log(this.formData),
                this.$message.success("添加成功")
                
            })
          }
          this.showModify = false;
          //发送一个事件,通过该事件来通知父组件修改/添加成功
          this.$emit("userChanged")
        } else {
          console.log("验证失败");
        }
      });
    }
  }
}
</script>